import React, { useState, useRef, useEffect } from 'react'
import classNames from 'classnames'
import { useDispatch } from 'react-redux'
import { changeStatus, delTodo, } from '../../store/actions/todo'

export default function Todoitem ({ item }) {
  // 准备currentId
  const [currentId, setCurrentId] = useState('')
  // 创建ref引用
  const inputRef = useRef()

  const dispatch = useDispatch()
  // 删除
  const handleDel = (id) => dispatch(delTodo(id))
  // 修改状态
  const handleChangeStatus = (id) => dispatch(changeStatus(id))


  // 双击显示对话框
  const handleDBLLable = (id) => setCurrentId(id)

  useEffect(() => { inputRef.current.focus() }, [currentId])

  return (
    <li
      className={classNames({
        completed: item.done,
        editing: item.id === currentId
      })}
    >
      <div className='view'>
        <input
          className='toggle'
          type='checkbox'
          checked={item.done}
          onChange={() => handleChangeStatus(item.id)}
        />
        <label onDoubleClick={() => handleDBLLable(item.id)}>{item.name}</label>
        <button className='destroy' onClick={() => handleDel(item.id)}></button>
      </div>
      {/* #2. ref 引用和 input 编辑框进行绑定 */}
      <input
        className='edit'
        value={item.name}
        onChange={() => { }}
        ref={inputRef}
      />
    </li>
  )
}
